<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 常用属性练习</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <header>
        <h1 class="threeD">
            CSS 常用属性
        </h1>
    </header>
    <main>
        <section id="text-prop">
            <h2 class="demo3">文本样式属性</h2>
            <p>CSS 可以设定文本的字体、大小、粗细、倾斜、行间距、缩进方式、颜色等等CSS 可以设定文本的字体、大小、粗细、倾斜、行间距、缩进方式、颜色等等CSS
                可以设定文本的字体、大小、粗细、倾斜、行间距、缩进方式、颜色等等CSS 可以设定文本的字体、大小、粗细、倾斜、行间距、缩进方式、颜色等等CSS 可以设定文本的字体、大小、粗细、倾斜、行间距、缩进方式、颜色等等
            </p>
            <div></div>
        </section>

        <section id="bg-section">
            <h2>背景</h2>
            <p>在 CSS 中，不但可以为整个网页设定背景，也可为具体元素设定背景，任何可显示出来的元素都可以设定背景样式。</p>

        </section>

        <section id="box-model">
            <h2>盒模型</h2>
            <p>元素的盒模型由外边距 (margin)、边框线 (border)、内边距（padding）以及元素的内容（content）构成。</p>
            <div class="box-demo">
                盒模型
            </div>
            <div class="box-demo">
                盒模型
            </div>
            <div class="box-demo">
                盒模型
            </div>
        </section>
        <section>
            <h2>信息流</h2>
            <p>浏览器在呈现信息时会按照元素的类型进行处理，它将块元素从上到下显示（块元素与块元素之间另起一行），将行内元素按语言方向水平显示（如汉字、英语是从左到右，维吾尔语、阿拉伯语等有些语言是从右到左），行内元素直到到达容器边缘时才换行显示，这种显示元素的方式叫做页面的正常流。
            </p>
            <p>常见的大多数元素属于块元素，如 p、table、div、li、ul、ol、object、h1-h6 等等，行内元素有 a、span、img、b、strong
                等等。需要注意的是，匿名内容（即没有使用元素标签标注的内容）也按行内元素处理。</p>
        </section>
    </main>
    <footer>
        <p><span>《网页设计与制作》</span><span>学号：P171717177 </span><span>指导教师：yangzh</span></p>
    </footer>
</body>

</html>
